<template>
  <div>
    <h1>留言板</h1>
    <ul>
      <li v-for="item in msgs" :key="item.id" :id="item.id">
        {{ item.val }}
        <button @click="del(item.id)">删除</button>
      </li>
    </ul>
    <textarea
      name=""
      id=""
      cols="30"
      rows="10"
      v-model.trim="msg"
      @keyup.enter="submit"
    ></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
      msgs: [],
    };
  },
  methods: {
    submit() {
      let obj = {
        val: this.msg,
        id: this.msgs.length,
      };
      this.msgs.push(obj);
      this.msg = "";
    },
    del(id){
        let res=this.msgs.filter(item=>{
            if(item.id!=id){
                return item
            }
        })
        this.msgs=res
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
